<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :title="displayModuleTitle"
    @ok="onOkButtonClick"
    width="700px"
  >
    <a-alert
      message="请从下方已配置的检查表模板中选择一个作为本次检查需填写的检查表。如没有需要填写的检查表模板，请联系管理员进行添加。"
      type="info"
      style="margin-bottom: 10px"
      show-icon
    />
    <BasicTable @register="registerTable" :pagination="false" :scroll="{ x: false, y: '300px' }">
      <template #catcode="{ record }"
        >{{ categoryOption.find((item) => item.value == record.catcode)?.label }}
      </template>
      <!-- <template #status="{ record }">
        <a-tag v-if="record.status == 0" color="green"> 启用 </a-tag>
        <a-tag v-else-if="record.status == 5">禁用</a-tag>
        <a-tag v-else>已删除</a-tag>
      </template> -->
    </BasicTable>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, onMounted, ref, computed, unref } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
  import { displayTitle } from '/@/utils/QcUnifyUtil';
  import { QcUnifyTransToChildProps } from '/#/QcUnify';
  import { OperationTypeEnum } from '/@/enums/appEnum';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { chooseFormColumns, chooseFormTableCondition } from './checkForm.data';
  const { createMessage } = useMessage();
  import { queryCheckForm } from '/@/api/ehs/checkForm';
  import { getAllTaskCategory } from '/@/api/ehs/taskCategory';
  export default defineComponent({
    emits: ['choose'],
    components: {
      BasicModal,
      BasicTable,
      TableAction,
    },
    name: 'ChooseCheckFormModal',
    setup(props, { emit }) {
      const qcUnifyProps = ref<QcUnifyTransToChildProps>();
      // 查询静态信息的单元id
      const orgcode = ref();
      const catcode = ref();
      const categoryOption = ref([]);
      const [registerModal, { closeModal }] = useModalInner((data) => {
        if (data != undefined && data != null) {
          let unrefData = unref(data);
          qcUnifyProps.value = unrefData;
          //接收父组件传递的数据
          getForm().updateSchema({
            field: 'catcode',
            ifShow: false,
          });
          orgcode.value = data.orgcode;
          catcode.value = data.catcode;
          clearSelectedRowKeys();
          if (data.defaultSelectKey) setSelectedRowKeys([data.defaultSelectKey]);
          reload();
          getAllTaskCategory(orgcode.value).then((res) => {
            categoryOption.value = res
              ? res.map((item) => {
                  return {
                    ...item,
                    label: item.catname,
                    value: item.catcode,
                  };
                })
              : [];
          });
        }
      });
      const [
        registerTable,
        { reload, getForm, getSelectRowKeys, setSelectedRowKeys, clearSelectedRowKeys },
      ] = useTable({
        api: queryCheckForm,
        columns: chooseFormColumns,
        canResize: true,
        striped: true,
        showTableSetting: false,
        immediate: false,
        showIndexColumn: true,
        isTreeTable: false,
        bordered: true,
        ellipsis: true,
        beforeFetch: (params) => {
          params.orgcode = orgcode.value;
          params.catcode = catcode.value;
          params.status = 0;
          return params;
        },
        rowSelection: { type: 'radio' },
        rowKey: 'tableid',
        afterFetch: (res) => {
          return res;
        },
      });

      /**
       * 选择一个检查表确认
       */
      function onOkButtonClick() {
        if (getSelectRowKeys().length == 0) {
          createMessage.warning('请选择一个检查表');
          return;
        }
        emit('choose', getSelectRowKeys()[0]);
        closeModal();
      }

      let displayModuleTitle = computed(() => {
        return displayTitle(qcUnifyProps.value);
      });

      return {
        orgcode,
        categoryOption,
        registerModal,
        registerTable,
        closeModal,
        onOkButtonClick,
        displayModuleTitle,
      };
    },
  });
</script>
